<template>
  <div class="script-container">
    <div class="script-list">
      <div
        v-for="script in getcomputedScripts"
        :key="script.id"
        class="script-card"
        @click="handleScriptClick(script.id)"
      >
        <el-image :src="script.cover" class="script-cover" fit="cover">
          <template #error>
            <div class="image-error">
              <el-icon><Picture /></el-icon>
            </div>
          </template>
        </el-image>
        <div class="script-info">
          <h3 class="script-title">{{ script.title }}</h3>
          <div class="script-meta">
            <div class="meta-item">
              <el-icon><User /></el-icon>
              <span>{{ script.players }}人</span>
            </div>
            <div class="meta-item">
              <el-icon><Clock /></el-icon>
              <span>{{ script.duration }}小时</span>
            </div>
          </div>
          <div class="script-tags">
            <el-tag
              v-for="tag in script.tags"
              :key="tag"
              size="small"
              :type="tagTypeMap[tag] || 'info'"
            >
              {{ tag }}
            </el-tag>
          </div>
          <p class="script-description">{{ script.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Picture, User, Clock } from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();

// 标签类型映射
const tagTypeMap = {
  恐怖: "danger",
  情感: "success",
  推理: "warning",
  城限: "primary",
};

// 剧本数据
const scriptsData = ref([
  {
    id: 1,
    list: [
      {
        categoryId: 1,
        title: "月下沙利叶",
        cover: "https://example.com/script1.jpg",
        players: "6",
        duration: "4.5",
        tags: ["城限", "恐怖", "推理"],
        description: "月光下的神秘仪式，隐藏在古老教堂中的秘密等待揭开...",
      },
      {
        categoryId: 2,
        title: "月下沙利叶",
        cover: "https://example.com/script1.jpg",
        players: "6",
        duration: "4.5",
        tags: ["城限", "恐怖", "推理"],
        description: "月光下的神秘仪式，隐藏在古老教堂中的秘密等待揭开...",
      },
      {
        categoryId: 3,
        title: "月下沙利叶",
        cover: "https://example.com/script1.jpg",
        players: "6",
        duration: "4.5",
        tags: ["城限", "恐怖", "推理"],
        description: "月光下的神秘仪式，隐藏在古老教堂中的秘密等待揭开...",
      },
    ],
  },
  {
    id: 2,
    list: [
      {
        categoryId: 1,
        title: "恐怖1",
        cover: "https://example.com/script1.jpg",
        players: "6",
        duration: "4.5",
        tags: ["城限", "恐怖", "推理"],
        description: "月光下的神秘仪式，隐藏在古老教堂中的秘密等待揭开...",
      },
      {
        categoryId: 2,
        title: "恐怖2",
        cover: "https://example.com/script1.jpg",
        players: "6",
        duration: "4.5",
        tags: ["城限", "恐怖", "推理"],
        description: "月光下的神秘仪式，隐藏在古老教堂中的秘密等待揭开...",
      },
      {
        categoryId: 3,
        title: "恐怖3",
        cover: "https://example.com/script1.jpg",
        players: "6",
        duration: "4.5",
        tags: ["城限", "恐怖", "推理"],
        description: "月光下的神秘仪式，隐藏在古老教堂中的秘密等待揭开...",
      },
    ],
  },
]);

const getcomputedScripts = computed(() => {
  const categoryId = Number(route.query.category);
  return categoryId
    ? scriptsData.value.filter((script) => script.id === categoryId)[0]?.list ||
        []
    : scriptsData.value;
});

const handleScriptClick = (id) => {
  router.push(`/scripts/${id}`);
};
</script>

<style scoped>
.script-container {
  /* max-width: 1200px; */
  /* margin: 20px auto; */
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.script-list {
  display: flex;
  flex-wrap: wrap;
}

.script-card {
  margin: 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  overflow: hidden;
  cursor: pointer;
}

.script-card:hover {
  transform: translateY(-5px);
}

.script-cover {
  width: 100%;
  height: 200px;
  background: #f5f5f5;
}

.script-info {
  padding: 16px;
}

.script-title {
  margin: 0 0 12px;
  font-size: 18px;
  color: #333;
}

.script-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 12px;
}

.meta-item {
  display: flex;
  align-items: center;
  color: #666;

  .el-icon {
    margin-right: 5px;
    font-size: 16px;
  }
}

.script-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.script-description {
  font-size: 14px;
  color: #888;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.image-error {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;

  .el-icon {
    font-size: 40px;
    color: #ccc;
  }
}
</style>
